<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图-classTS</title>
<style>
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{
	background-color: #eee;
}

.box{
	position: relative;
	margin:2rem auto;
	width: 700px; 
	height: 350px; 
	/* border:5px solid #f00; */
  overflow: hidden;
}

.box .imgBox{
	/* width:100%; */
	height:100%;
	overflow: hidden; 
	/* transition: left .2s; */
}

.box .imgBox img{
	float:left;
	height:100%;
}

.box .btnsBox{
	width: 100%;
	position: absolute;
	bottom: 50%;
	transform: translateY(50%);
	display: flex;
	justify-content: space-between;
}

.box .btnsBox>*{
	text-shadow: 1px 0 2px #fff;
	font-size: 5rem;
	line-height: 2;
	background-color: transparent;
	cursor: pointer;
	background-color: rgba(255,255,255,.5);
}

.box .operateBtns{
	position: absolute;
	width: 50%;
	bottom: 1rem;
	left:50%;
	transform: translateX(-50%);
	list-style-type: none; 
	display: flex;
	justify-content: space-around;

}

.box .operateBtns li{
	 background-color: #000;
	 border:1px solid #FFF;
	 cursor: pointer;
	 width:10%;
	 height:.8rem;
}

.box .operateBtns li.active{
	background-color: #F00 !important;
}

</style>
</head>
<body>

<h1 style="text-align: center; line-height: 3;">轮播图案例</h1>

<div id="lbt1" class="box">
	<div class="imgBox">
		<img src="./images/0.jpg">
		<img src="./images/1.jpg">
		<img src="./images/2.jpg">
		<img src="./images/3.jpg">
		<img src="./images/4.jpg">
	</div>
</div>

<br/>
<div id="lbt2" class="box">
	<div class="imgBox">
		<img src="./images/0.jpg">
		<img src="./images/1.jpg">
		<img src="./images/2.jpg">
		<img src="./images/3.jpg">
		<img src="./images/4.jpg">
	</div>
</div>

<br/>
<div id="lbt3" class="box">
	<div class="imgBox">
		<img src="./images/0.jpg">
		<img src="./images/1.jpg">
		<img src="./images/2.jpg">
		<img src="./images/3.jpg">
		<img src="./images/4.jpg">
	</div>
</div>


<script src="./lbt.js"></script>
<script>
new Lunbotu({boxSlt:"#lbt1", offsetTime:2000});
new Lunbotu({boxSlt:"#lbt2", offsetTime:1000});
new Lunbotu({boxSlt:"#lbt3", offsetTime:4000});
</script>
</body>
</html>